<template>
	<view>
		<view class="box">
			<view class="image_face_box">
				<view class="photoFrame">
					<view class="face">
						<image class="face_image" :src="userInfo.userImg"></image>
					</view>
					<view class="user_tap">
						<view class="tap_top">
							<view class="nickname">{{userInfo.name}}</view>
							<view class="sex" v-if="userInfo.sex == '男'">
								<svg t="1674120217747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="18" height="18"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 938.666667A426.666667 426.666667 0 0 1 85.333333 512v-8.96a1108.053333 1108.053333 0 0 0 181.333334-166.186667A512 512 0 0 0 618.666667 469.333333a270.08 270.08 0 0 1-146.56-138.88c157.866667 90.88 373.546667 136.746667 465.066666 152.96 0 9.6 1.493333 18.986667 1.493334 28.586667a426.666667 426.666667 0 0 1-426.666667 426.666667z" fill="#04aaf0" p-id="2059"></path><path d="M341.333333 512a42.666667 42.666667 0 0 0-42.666666 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667zM682.666667 512a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333a42.666667 42.666667 0 0 0-42.666666-42.666667z" fill="#04aaf0" p-id="2060"></path></svg>
							</view>
							<view class="sex" v-if="userInfo.sex == '女'">
								<svg t="1674120486445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2219" width="18" height="18"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 938.666667a426.666667 426.666667 0 0 1-341.333333-170.666667V426.666667h426.666666l42.666667-170.666667 42.666667 170.666667h170.666666v341.333333a426.666667 426.666667 0 0 1-341.333333 170.666667z" fill="#f958ec" p-id="2220"></path><path d="M341.333333 512a42.666667 42.666667 0 0 0-42.666666 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667zM682.666667 512a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333a42.666667 42.666667 0 0 0-42.666666-42.666667z" fill="#f958ec" p-id="2221"></path></svg>
							</view>
						</view>
						<view>
							<view v-if="userInfo.username != null" class="synopsis">vae号: {{userInfo.username}}</view>
						</view>
						<view class="tap_center">
							<view class="lv">lv : {{userInfo.lv}}</view>
						</view>
						
					</view>
					
				</view>
				<view class="my_motto">
					<view class="tap_bottom">
						<view class="motto">{{userInfo.motto == null ? "个性签名" : userInfo.motto}}</view>
					</view>
				</view>
				<view v-if="1==2" class="abstract">
					<view class="motto">{{userInfo.motto}}</view>
				</view>
			</view>
			<view class="info_box">
				<view class="setup" v-for="(item, index) in setupInfo" :key="index">{{item}}
					<view v-if="item == '账号'" class="synopsis">{{userInfo.username}}</view>
				</view>
			</view>
			<view class="action_box" @click="log()">
				<view v-if="!isLogin" class="login">登录/注册</view>
				<view v-else class="logout">退出</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					userImg:"../../static/img/face.png",
					name:"昵称",
					age: 0,
					sex: null,
					motto:"个性签名",
					lv: 0,
					username:"账号",
					
				},
				isLogin:false,
				setupInfo:["账号","隐私","设置","其他"]
			};
		},
		methods:{
			log(){
				//登录
				if(!this.isLogin){
					this.$emit("isShowLoginPage",true)
				}else{
					alert("点击退出")
					uni.request({
						url: "http://"+getApp().globalData.ip+"/user/logout",
						method:'GET',
						data: {
						    username: getApp().globalData.userAllInfo.userInfo.username,
						},
						success: (res) => {
							uni.hideLoading()
							//清除全局用户数据
							getApp().globalData.userAllInfo=null;
							getApp().globalData.isLogin = false;
							this.userInfo = {
								userImg:"../../static/img/face.png",
								name:"昵称",
								age: 0,
								sex: null,
								motto:"个性签名",
								lv: 0,
								username:"账号",
								
							};
							this.isLogin=false;
							
							//检测websocket是否还开起
							let iswbsocket = true;
							uni.onSocketClose((res) => {
								uni.clearStorage();
								iswbsocket = false
							})
							if(iswbsocket){
								uni.closeSocket();
							}
							
							uni.showToast({
								title:"退出成功",
							})
						},
						fail() {
							uni.showToast({
								title: '未能退出成功，请稍后再试',
								icon:'error',
								duration: 2000
							})
						}
					})
				}
			}
			
		},
		created() {
			if(getApp().globalData.userAllInfo != null){
				this.userInfo = getApp().globalData.userAllInfo.userInfo;
			}
			this.isLogin = getApp().globalData.isLogin;
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.box,.photoFrame,.action_box,.user_tap,.tap_top,.tap_bottom,.setup{
		display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
		display: -moz-box;     /* 老版本语法: Firefox (buggy) */
		display: -ms-flexbox;  /* 混合版本语法: IE 10 */
		display: -webkit-flex; /* 新版本语法: Chrome 21+ */
		display: flex;
	}
	.box{
		flex-direction: column;
		align-items: center;
	}
	.image_face_box,.info_box,.action_box{
		margin-top: 20px;
		width: 80%;
		
	}
	.info_box{
		//首行缩进
		text-indent: 10px;
	}
	.info_box,.action_box,.photoFrame,.my_motto{
		background-color: #b4eddbad;
	}
	.user_tap{
		margin-left: 5px;
		flex-direction: column;
		justify-content: space-around;
		flex: 1;
	}
	.face,.face_image{
		width: 66px;
		height: 66px;
		border-radius: 50%;
	}
	.setup,.action_box{
		height: 100rpx;
		line-height: 100rpx;
		letter-spacing: 1em;
		font-weight: 600;
	}
	.photoFrame{
		border-radius: 33px;
	}
	.tap_bottom{
		margin-top: 20px;
		line-height: 30rpx;
		padding: 10px;
		//文字，字母，数字自动换行
		white-space:normal;
		word-break:break-all;
		//换行后对齐
		TEXT-JUSTIFY: inter-ideograph;
		TEXT-ALIGN: justify
	}
	/* .image_face_box{
		//height: 100rpx;
		border-top-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		
	} */
	.action_box{
		flex-direction: column;
		align-items: center;
		color: #8686867d;
	}
	.login{
		color: #000;
	}
	/* .tap_top{
		flex-direction: row;
		justify-content: space-between;
	} */
	.tap_top>view:nth-child(2){
		margin-left: 40rpx;
	}
	/* .tap_top>view{
		margin-left: 40rpx;
	} */
	.tap_bottom{
		flex-direction: row;
		justify-content: space-between;
	}
	.setup{
		justify-content: space-between
	}
</style>
